<template>
  <div>
    <el-dialog
      title="竞技设置"
      width="980px"
      class="gl_dialog_TitleLine"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <div v-loading="pageLoading" class="kyorugi_setting" style="min-height: 180px;">
        <el-tabs v-model="tabActiveName" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="个人竞技模型" name="ind">
            <el-row>
              <el-col :span="12">请选择竞技模型</el-col>
              <el-col :span="12" align="right">
                <el-button type="primary" size="mini" @click="handleCompetitiveModel('ind', 'add')">添加个人竞技模型</el-button>
              </el-col>
            </el-row>
            <el-row v-if="modelData.length" :gutter="20">
              <el-col v-for="item in modelData" :key="item.id" :span="8">
                <el-radio v-model="selectKyorugiSettingId" :label="item.id">
                  <span class="model_title gl_ellipsis" :title="item.name">{{ item.name }}</span>
                </el-radio>
                <el-button size="mini" type="text" @click="handleCompetitiveModel('ind', 'check', item)">
                  <span class="gl_color_primary">查看</span>
                </el-button>
                <el-button size="mini" type="text" @click="handleCompetitiveModel('ind', 'edit', item)">
                  <span class="gl_color_primary">编辑</span>
                </el-button>
                <el-button size="mini" type="text" @click="delectKyorugiSetting(item)">
                  <span class="gl_color_error">删除</span>
                </el-button>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <div class="gl_noData_mockTable">
                  <p>暂无数据</p>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="团体竞技模型" name="team">
            <el-row>
              <el-col :span="12">请选择竞技模型</el-col>
              <el-col :span="12" align="right">
                <el-button type="primary" size="mini" @click="handleCompetitiveModel('team', 'add')">添加团体竞技模型</el-button>
              </el-col>
            </el-row>
            <el-row v-if="modelData.length" :gutter="20">
              <el-col v-for="item in modelData" :key="item.id" :span="8">
                <el-radio v-model="selectKyorugiSettingId" :label="item.id">
                  <span class="model_title gl_ellipsis" :title="item.name">{{ item.name }}</span>
                </el-radio>
                <el-button size="mini" type="text" @click="handleCompetitiveModel('team', 'check', item)">
                  <span class="gl_color_primary">查看</span>
                </el-button>
                <el-button size="mini" type="text" @click="handleCompetitiveModel('team', 'edit', item)">
                  <span class="gl_color_primary">编辑</span>
                </el-button>
                <el-button size="mini" type="text" @click="delectKyorugiSetting(item)">
                  <span class="gl_color_error">删除</span>
                </el-button>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <div class="gl_noData_mockTable">
                  <p>暂无数据</p>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <div class="base_kyorugi_setting">
          <el-button size="mini" type="primary" @click="handleCompetitiveModel('base', 'add')">竞技模型数据初始设置</el-button>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
        <el-button size="mini" type="primary" :loading="submitLoading" :disabled="selectKyorugiSettingId === ''" @click="handleSubmitModule">{{ $t('button.save') }}</el-button>
      </div>
    </el-dialog>
    <edit-competitive-model ref="editCompetitiveModel" @pushTabelData="addTableData" @editTabelData="updataTabelDate" @updateBaseKyorugiSetting="updateBaseKyorugiSetting" />
  </div>
</template>
<script>
import {
  api_GET_EventsManagementKyorugiSetting,
  api_POST_EventsManagementEventSetKyorugi,
  api_DELETE_EventsManagementKyorugiSettingId,
  api_PUT_EventsManagementKyorugiSettingId,
  api_POST_EventsManagementKyorugiSetting,
  api_GET_EventsManagementKyorugiSettingDefault,
  api_PUT_EventsManagementKyorugiSettingDefault
} from '@/extend/api/gameswaggerApi/app';
import editCompetitiveModel from './editCompetitiveModel.vue';
export default {
  components: {
    editCompetitiveModel
  },
  data() {
    return {
      dialogVisible: false,
      pageLoading: false,
      submitLoading: false,
      modelData: [],
      selectKyorugiSettingId: '',
      tabActiveName: 'ind'
    };
  },
  methods: {
    init() {
      this.submitLoading = false;
      this.selectKyorugiSettingId = '';
    },
    async open(eventsId, eventInfo) {
      this.init();
      this.eventsId = eventsId;
      this.eventInfo = eventInfo || {};
      this.dialogVisible = true;
      this.pageLoading = true;
      await this.getKyorugiSettingList();
      this.pageLoading = false;
    },
    async handleTabClick() {
      this.selectKyorugiSettingId = '';
      this.pageLoading = true;
      this.modelData = [];
      await this.getKyorugiSettingList();
      this.pageLoading = false;
    },
    // 获取竞技模型数据列表
    getKyorugiSettingList() {
      return new Promise((resolve, reject) => {
        api_GET_EventsManagementKyorugiSetting({ isTeam: this.tabActiveName === 'team' }).then(res => {
          this.modelData = res.items || [];
          for (let i = 0; i < this.modelData.length; i++) {
            const item = this.modelData[i];
            if (item.name === this.eventInfo.kyorugiSettingName) {
              this.selectKyorugiSettingId = item.id;
              break;
            }
          }
          resolve(res);
        }, error => {
          this.$message({ type: 'error', message: error.error && error.error.message || '' });
          reject(error);
        });
      });
    },
    handleSubmitModule() {
      this.submitLoading = true;
      const setKyorugiVO = {
        eventsId: this.eventsId,
        kyorugiSettingId: this.selectKyorugiSettingId
      };
      api_POST_EventsManagementEventSetKyorugi(setKyorugiVO).then(res => {
        this.submitLoading = false;
        this.$message({ type: 'success', message: '设置成功' });
        this.$emit('refreshPage');
        this.dialogVisible = false;
      }, error => {
        this.$message({ type: 'error', message: error.error && error.error.message });
      });
    },
    // 删除
    delectKyorugiSetting(row) {
      this.$confirm('你确定要删除这条信息?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementKyorugiSettingId(row.id).then(res => {
          this.getKyorugiSettingList();
          this.$message({ type: 'success', message: '删除成功' });
        }, error => {
          this.$message({ type: 'error', message: error.error && error.error.message || '' });
        });
      });
    },
    async handleCompetitiveModel(code, typeCode, row) {
      var data = row;
      if (typeCode === 'check' || typeCode === 'edit') {
        data = JSON.parse(JSON.stringify(row));
      }
      console.log(typeCode);
      if (typeCode === 'add') {
        data = await this.getDefaultKyorugiSetting();
      }
      this.$refs.editCompetitiveModel.open(data, typeCode, code);
    },
    // 获取默认竞技模型数据
    getDefaultKyorugiSetting() {
      return new Promise((resolve, reject) => {
        api_GET_EventsManagementKyorugiSettingDefault().then(res => {
          resolve(res);
        }, error => {
          this.$message({ type: 'error', message: error.error && error.error.message || '' });
          reject(error);
        });
      });
    },
    // 新增
    addTableData(data) {
      api_POST_EventsManagementKyorugiSetting(data).then(res => {
        this.getKyorugiSettingList();
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.$refs.editCompetitiveModel.close();
      }, error => {
        if (error.error.message.indexOf('已经存在') > -1) {
          this.$message({
            message: '该名称已存在',
            type: 'warning'
          });
        } else {
          this.$message({ type: 'error', message: error.error && error.error.message || '' });
        }
      });
    },
    // 修改
    updataTabelDate(data) {
      api_PUT_EventsManagementKyorugiSettingId(data.id, data).then(res => {
        this.getKyorugiSettingList();
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.$refs.editCompetitiveModel.close();
      }, error => {
        this.$message({ type: 'error', message: error.error && error.error.message || '' });
      });
    },
    // 编辑基础竞技模型
    updateBaseKyorugiSetting(data) {
      api_PUT_EventsManagementKyorugiSettingDefault(data).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.$refs.editCompetitiveModel.close();
      }, error => {
        this.$message({ type: 'error', message: error.error && error.error.message || '' });
      });
    }
  }
};
</script>
<style scoped>
.kyorugi_setting {
  position: relative;
}
.base_kyorugi_setting {
  position: absolute;
  right: 0;
  top: 5px;
}
.model_title{
  width: 130px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
</style>
